<template>
  <div
      class="scroll-container"
      @mouseenter="stopScroll"
      @mouseleave="startScroll"
  >
    <div class="scroll-content" :style="{ animationPlayState }">
      <div class="scroll-items">
        <slot></slot>
      </div>
      <div class="scroll-items">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const animationPlayState = ref('running');

const startScroll = () => {
  animationPlayState.value = 'running';
};

const stopScroll = () => {
  animationPlayState.value = 'paused';
};
</script>

<style scoped>
.scroll-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  position: relative;
}

.scroll-content {
  display: flex;
  flex-direction: row;
  animation: scroll linear infinite;
  animation-duration: 50s; /* Adjust the duration for speed */
  animation-play-state: running;
}

.scroll-items {
  display: flex;
  flex-direction: row;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
